uni

您所在的位置:网站首页 uniapp 小程序授权登录 uni

uni

2024-03-16 13:58| 来源: 网络整理| 查看: 265

用户分为两类:没有注册的用户,已经注册的用户

如何检测?首先需要触发用户点击,这里使用button按钮

 

user.vue 

登录 / 注册

js 处理用户触发事件,调用getUserProfile获取用户信息,每次请求都会弹出授权窗口,用户同意后返回 userInfo。调用uni.login 返回用户登录凭证code码,将获取到的userlnfo、code参数传递给后端接口,接口返回状态码判断用户是否已经注册过了...................

getuserinfo(e) { let that = this; if (that.preventClick) { that.preventClick = false; //防止用户重复点击弹出授权窗口 wx.getUserProfile({ desc: '用于完善用户资料', lang: 'zh_CN', success: (res) => { //console.log(res); that.preventClick = true; uni.login({ provider: 'weixin', success: function(loginRes) { var user_info = JSON.stringify(res['userInfo']); //获取 getUserProfile API返回的用户信息 uni.setStorageSync('zc_userinfo', user_info); //将用户信息缓存在本地 uni.request({ header: { 'content-type': 'application/x-www-form-urlencoded' }, url: '接口地址', method: '接口类型', data: { code: loginRes['code'], //login API返回用户登录凭证。开发者需要在开发者服务器后台,使用 code 换取 openid 和 session_key 等信息 user_info: user_info, // code 和 userinfo 一起传参数回去给后台接口 }, success: function(res3) { //console.log(res3); if (res3.data.code == 0) { //根据接口返回的code码判断用户是否已经注册过了,(返回的code码和后端工程师商量好统一返回) that.login(res3.data.data); //登录成功代表用户已经注册过了,代表数据库能查询到用户信息,这时候可以调用vuex.login()缓存用户信息、登陆状态 uni.showToast({ title: '登录成功', duration: 1000 }); setTimeout(function() { //跳转页面后自动刷新 uni.switchTab({ url: '/pages/user/user', success: function(e) { var page = getCurrentPages().pop(); if (page == undefined || page == null){ return; } else { page.onLoad(); } } }); }, 200); } else if (res3.data.code == -2) { //代表用户没有注册过,数据库查询不到相关信息,弹窗要求用户点击注册按钮 that.shows = "block"; } else { //其他原因登录失败 uni.showToast({ title: '授权登录失败!', mask: true, icon: 'none' }) } } }) } }); }, fail: (res) => { //接口调用失败的回调函数 //console.log(res) that.preventClick = true; } }) } },

如果用户没有注册过,弹窗要求用户点击按钮进行注册

使用button按钮 设置获取用户手机号,可以从@getphonenumber回调中获取到用户信息

点击注册

js调用uni.login 获取登录凭证 code,使用 code 换取 openid 和 session_key 等信息

使用encryptedData、iv、session_key换取手机号码,检查手机号码是否为合法的11位数字....

注册成功调用vuex.login()缓存用户信息、登陆状态

//小程序登录获取手机号码注册 getPhoneNumber: function(e) { //console.log(e) var that = this; if (e.detail.errMsg != "getPhoneNumber:ok") { uni.showModal({ title: '提示', showCancel: false, content: '未授权', success: function(res) {} }) } else { //调用接口获取登录凭证 uni.login({ provider: 'weixin', success: function(loginRes) { //console.log(loginRes) //获取到的code var code = loginRes.code; //获取openid uni.request({ header: { 'content-type': 'application/x-www-form-urlencoded' }, url: '接口地址', method: '接口类型', data: { code: code, //login API返回用户登录凭证。开发者需要在开发者服务器后台,使用 code 换取 openid 和 session_key 等信息 }, success: function(res) { //console.log(res) var res = JSON.parse(res.data); var se_key = res.session_key; var encryptedData = e.detail.encryptedData; var iv = e.detail.iv; var openid = res.openid; var unionid = res.unionid; //换取手机号 uni.request({ header: { 'Content-Type': 'application/x-www-form-urlencoded' }, url: '接口地址', method: '接口类型', data: { encryptedData: encryptedData, iv: iv, se_key: se_key }, success: function(res2) { //console.log(res2) var res2 = JSON.parse(res2.data); if (res2.phoneNumber != "") { var phoneNumber = res2.purePhoneNumber; that.phone = phoneNumber; var cellPhone = /^\d{11}$/; if (!cellPhone.test(that.phone) || that.phone.length != 11 || that.phone.length == 0) { uni.showToast({ title: '手机号获取失败,请重新登入或者联系管理员~', duration: 2000, icon: "none" }) return; } else { //拿到手机号码开始注册 uni.request({ header: { 'content-type': 'application/x-www-form-urlencoded' }, url: '接口地址', method: '接口类型', data: { //接口需要的数据 code: code, binding: that.phone, openid: openid, unionid: unionid, session_key: se_key, user_info: uni.getStorageSync('zc_userinfo'), //.............. }, success: function(res) { //console.log(res) //判断接口返回的状态码 if (res.data.code == 0) { that.login(res.data.data); //注册成功,这时候可以调用vuex.login()缓存用户信息、登陆状态 uni.showToast({ title: '注册成功', duration: 1000 }); that.shows ="none"; //关闭弹窗 setTimeout(function() { uni.switchTab({ url: '/pages/user/user', success: function(e) { var page = getCurrentPages().pop(); if (page == undefined || page == null) { return; } else { page.onLoad(); //跳转页面后自动刷新 } } }); },500); } else if (res.data.code == -1) { //注册失败 根据接口返回的状态码做出判断,弹窗提示信息 that.code = ""; uni.showToast({ title: res.data.msg, mask: true, icon: 'none' }) } else if (res.data.code == -2) { that.mobile = ""; uni.showToast({ title: res.data.msg, mask: true, icon: 'none' }) } else { uni.showToast({ title: res.data.msg, mask: true, icon: 'none' }) } } }) } } else { that.phone = ''; } } }) }, }); } }); } },

官方文档:https://uniapp.dcloud.net.cn/api/plugins/login



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3